<style>
  .layui-input,
  .layui-textarea {
    display: block;
    width: 85%;
    padding-left: 10px;
  }

  .layui-form-label {
    float: left;
    display: block;
    padding: 9px 15px;
    width: 113px;
    font-weight: 400;
    line-height: 20px;
    text-align: right;
  }

  .layui-form-label.required:before {
    /* 这种写法也可以*/
    content: " *";
    color: red;
  }

  .layui-form-select dl {
    left: 33px;
    min-width: 85%;
  }
</style>

<script type="text/html" id="viewAttachmentHtml">
  <div id="example1" style="height: 100%;"></div>
</script>
<script type="text/javascript" src="../../../admin/assets/js/pdfobject.min.js"></script>
<!-- 表单弹窗 -->
<form lay-filter="productReviewForm" class="layui-form model-form">
  <input name="id" type="hidden" />

  <fieldset class="layui-elem-field layui-field-title">
    <legend>客户信息产品信息</legend>
  </fieldset>

  <div class="layui-form-item layui-row">
    <div class="layui-col-md3">
      <label class="layui-form-label required">客户名称：</label>
      <div class="layui-input-block">
        <select id="customerId" lay-search="" name="customerId" lay-filter="customerId" class="common-select-search"></select>
      </div>
    </div>
    <div class="layui-col-md3">
      <label class="layui-form-label required">客户SKU料号：</label>
      <div class="layui-input-block">
        <select id="cusSkuCode" lay-search="" name="cusSkuCode" lay-filter="cusSkuCode" class="common-select-search"></select>
      </div>
    </div>

    <div class="layui-col-md3">
      <label class="layui-form-label">客户产品类别：</label>
      <div class="layui-input-block">
        <input id="cusProductCategory" name="cusProductCategory" placeholder="请输入产品类别" type="text" class="layui-input" required autocomplete="off" />
      </div>
    </div>

    <div class="layui-col-md3">
      <label class="layui-form-label required">客户产品名称：</label>
      <div class="layui-input-block">
        <input id="cusProductName" name="cusProductName" placeholder="请输入产品名称" type="text" class="layui-input" lay-verify="required" required autocomplete="off" />
      </div>
    </div>
  </div>
  <div class="layui-form-item layui-row">
    <div class="layui-col-md3">
      <label class="layui-form-label">客户规格码：</label>
      <div class="layui-input-block">
        <input id="cusProductSpec" name="cusProductSpec" placeholder="请输入规格码" type="text" class="layui-input" required autocomplete="off" />
      </div>
    </div>
    <div class="layui-col-md3">
      <label class="layui-form-label required">计量单位：</label>
      <div class="layui-input-block">
        <input id="proUnitName" name="proUnitName" placeholder="请输计量单位" type="text" class="layui-input" lay-verify="required" required autocomplete="off" />
      </div>
    </div>
    <div class="layui-col-md3">
      <label class="layui-form-label">需求数量：</label>
      <div class="layui-input-block">
        <input name="cusProductCount" placeholder="请输需求数量" type="text" class="layui-input" required autocomplete="off" />
      </div>
    </div>
    <div class="layui-col-md3">
      <label class="layui-form-label required">评审截止时间：</label>
      <div class="layui-input-block">
        <input type="text" id="reviewEndTime" name="reviewEndTime" class="layui-input" placeholder="请选评审截止时间" />
      </div>
    </div>
  </div>
  <div class="layui-form-item layui-row">
    <div class="layui-col-md3">
      <label class="layui-form-label required">评审部门：</label>
      <div class="layui-input-block">
        <input id="departmentId" name="departmentId" type="hidden" />
        <div id="departmentMain" style="width: 84%; margin-left: 33px"></div>
      </div>
    </div>
    <div class="layui-col-md3">
      <label class="layui-form-label required">评审岗位：</label>
      <div class="layui-input-block">
        <select id="postId" name="postId" lay-filter="postId" class="common-select-search"></select>
      </div>
    </div>
    <div class="layui-col-md3">
      <label class="layui-form-label required">上传图纸附件：</label>
      <div class="layui-input-block">
        <div id="fileUploadBtn" class="layui-btn" style="float: left; margin-left: 3px"><i class="layui-icon">&#xe681;</i>上传文件</div>
        <br />
        <div id="addHeaderPdf" class="companyFormPhotos"></div>
        <input name="attachmentPdf" id="attachmentPdf" type="hidden" class="layui-input" lay-verify="attachmentPdf" />
      </div>
    </div>
    <div class="layui-col-md3">
      <label class="layui-form-label required">计划交货时间：</label>
      <div class="layui-input-block">
        <input type="text" id="planGivenTime" name="planGivenTime" class="layui-input" placeholder="请选择计划交货时间" />
      </div>
    </div>
  </div>
  <div class="layui-form-item layui-row">
    <div class="layui-col-md6">
      <label class="layui-form-label">包装说明：</label>
      <div class="layui-input-block">
        <textarea name="remark" placeholder="说明" class="layui-textarea" autocomplete="off" />
      </div>
    </div>
    <div class="layui-col-md6">
      <label class="layui-form-label">工艺说明：</label>
      <div class="layui-input-block">
        <textarea name="processDescription" placeholder="工艺说明" class="layui-textarea" autocomplete="off" />
      </div>
    </div>
  </div>
  <div class="layui-form-item text-right">
    <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
    <button class="layui-btn" lay-filter="productReviewFormSubmit" lay-submit>保存</button>
  </div>
</form>

<!-- js部分 -->
<script>
  layui.use(["layer", "form", "table", "laydate", "admin", "laytpl", "upload", "config"], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var config = layui.config;
    var upload = layui.upload;
    var table = layui.table;
    var admin = layui.admin;
    var form = layui.form;
    var laydate = layui.laydate;

    let customerName = "";
    let postName = "";

    let fileName = "";

    //加载是默认填写
    // document.getElementById("d2").style.display = "none";//隐藏
    // document.getElementById("d1").style.display = "";//显示

    // 上传附件-pdf
    upload.render({
      elem: "#fileUploadBtn",
      url: config.upload_url + "uploadFile",
      data: {},
      accept: "file",
      exts: "jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx",
      headers: { Authorization: "Bearer " + config.getToken() },
      done: function (res) {
        if (res.code == 200) {
          layer.msg(res.msg || "上传成功", { icon: 1 });
          let imagUrl = res.data.url;
          let name = res.data.fileName;
          fileName = res.data.fileName;
          $("#addHeaderPdf").html(
            '<div class="attachments">' +
              '<div><img name="attachments" src="../../../admin/assets/images/attachmentsIcon/pdf.png"><span class="file-a">' +
              name +
              "</span></div></div>"
          );
          $("#attachmentPdf").val(imagUrl);

          $(".attachments").click(function () {
            let json = {};
            json.attachment = imagUrl;
            showViewAttachmentModel(json);
          });
        } else if (res.code == 502) {
          return location.replace("admin/login.html");
        } else {
          layer.msg(res.msg || "上传失败", { icon: 2 });
        }
      }
    });

    let selectMap = new Map();

    let skuCode = "";

    //customerId
    form.on("select(customerId)", function (data) {
      $("#cusSkuCode").empty();
      customerName = data.elem.selectedOptions[0].text;
      let customerId = data.value;
      //查询客户下的sku料号
      admin.initDataSelectAndMap(
        "enterprise/sell/admin/customerProductCatalog/list",
        { limit: 9999, customerId: customerId, isHaveInSku: 1 },
        "cusSkuCode",
        null,
        "外部产品",
        "cusProductName",
        "cusProductId",
        selectMap
      );

      form.on("select(cusSkuCode)", function (data) {
        let value = data.value;
        let newVar = selectMap.get(value);
        console.log(123, selectMap);
        console.log(123, newVar);

        $("#cusProductCategory").val(newVar.proTypeName);
        $("#cusProductName").val(newVar.cusProductName);
        $("#cusProductSpec").val(newVar.cusProductSpec);
        $("#proUnitName").val(newVar.proUnitName);
        skuCode = data.elem.selectedOptions[0].text;
      });
    });

    //postId
    form.on("select(postId)", function (data) {
      postName = data.elem.selectedOptions[0].text;
    });

    // 查看附件
    function showViewAttachmentModel(data) {
      admin.open({
        type: 1,
        area: ["60%", "80%"],
        offset: "65px",
        title: "查看附件",
        content: $("#viewAttachmentHtml").html(),
        success: function () {
          if (data.attachment && data.attachment.indexOf(".pdf") !== -1) {
            PDFObject.embed(data.attachment, "#example1");
          } else {
            var attachmentHtml = "";
            data.attachment.split(",").forEach((attachmentUrl, index) => {
              attachmentHtml += '<div><div><img src="' + attachmentUrl + '"></div></div>';
            });
            $("#example1").html(attachmentHtml);
          }
        }
      });
    }

    let subjectId = "";

    //初始化客户名称
    admin.req(
      "enterprise/sell/admin/customersInfo/getBasicInfo",
      { customerType: "2,3" },
      function (res) {
        if (200 == res.code) {
          $("form select[name='customerId']").append(new Option("请选择客户", "")); //往下拉菜单里添加元素
          $.each(res.data, function (index, item) {
            $("form select[name='customerId']").append(new Option(item.customerName, item.id)); //往下拉菜单里添加元素
          });
          $("form select[name='customerId']").val(subjectId);
          layui.form.render(); //菜单渲染 把内容加载进
        } else {
          layer.msg("获取客户失败!", { icon: 2, time: 1000 });
        }
      },
      "GET"
    );

    // Sku老数据信息
    // admin.initDataSelectAndMap("enterprise/product/admin/productDetailWMS/list", {categoryType: "production"}, "inSkuCodeHave", null, "SKU物料", "skuCode", null, oldSkuInfo);

    //部门列表
    admin.initDataSelectTree(true, "user/admin/role/getTreeData", null, "departmentMain", null, "部门", "departmentId", function (data) {
      // 获取部门ID
      let departmentId = data.change[0].value;
      //赋值部门id
      $("#departmentId").val(data.change[0].value);
      $("#postId").empty();
      //部门下的岗位列表
      admin.initDataSelect("user/admin/role/getPostData", { roleId: departmentId }, "postId", null, "岗位", null, null);
    });

    //表单提交事件
    form.on("submit(productReviewFormSubmit)", function (d) {
      layer.load(2);

      d.field.customerName = customerName;
      d.field.postName = postName;
      d.field.fileName = fileName;
      d.field.reviewProcessId = "1";
      d.field.extProductId = d.field.cusSkuCode;
      d.field.cusSkuCode = skuCode;

      if (d.field.productTypeId == null) {
        d.field.productTypeId = $("#productTypeId2").val();
      }
      admin.req(
        "enterprise/product/admin/productReview/add",
        d.field,
        function (res) {
          layer.closeAll("loading");
          if (res.code == 200) {
            layer.msg(res.msg, { icon: 1 });
            table.reload("reviewTableInfo");
            layer.closeAll("page");
          } else {
            layer.msg(res.msg, { icon: 2 });
          }
        },
        "POST"
      );
      return false;
    });

    //时间选择器
    laydate.render({
      elem: "#reviewEndTime",
      type: "datetime"
    });

    laydate.render({
      elem: "#planGivenTime",
      type: "datetime"
    });
  });
</script>
